<template>
  <article class="perfect-info-main">
    <div class="content">
      <div v-if="type == 1">
        <div class="title">你需要在微信公众平台完善小程序基本信息。</div>
        <div class="text">1. 进入微信公众平台 - 点击左侧菜单栏 “设置” ；</div>
        <div class="text">2. 在 “基本设置” tab页面完善小程序基本信息。</div>
        <img class="bg-img" src="https://static.scrm.keyid.cn/assets/images/web-pc/baseinfo_update.png" />
      </div>
      <div v-if="type == 2">
        <div class="title">由于微信公众平台规定，你需要在微信公众平台解除授权。</div>
        <div class="text">1. 进入微信公众平台 - 点击左侧菜单栏 “设置” ；</div>
        <div class="text">2. 在 “第三方设置” tab页面解除授权。</div>
        <img class="bg-img" src="https://static.scrm.keyid.cn/assets/images/web-pc/mp_out.png" />
      </div>
      <div v-if="type == 4">
        <div class="title">你需要在微信公众平台完善小程序基本信息。</div>
        <div class="text">1. 进入微信公众平台 - 点击左侧菜单栏 “开发管理” ；</div>
        <div class="text">2. 在 “接口设置” tab页面开通所需接口权限。</div>
        <img class="bg-img" src="https://static.scrm.keyid.cn/assets/images/web-pc/auth_open.png" />
      </div>
      <div v-if="type == 5">
        <div class="title">你需要在微信公众平台完善小程序基本信息。</div>
        <div class="text">1. 进入微信公众平台 - 点击左侧菜单栏 “开发管理” ；</div>
        <div class="text">2. 在 “开发设置” tab页面服务器域名区域修改域名。</div>
        <img class="bg-img" src="https://static.scrm.keyid.cn/assets/images/web-pc/server_set.png" />
      </div>
    </div>
    <div class="footer_buttons">
      <el-button type="primary" @click="onWxOpen()">前往微信公众平台</el-button>
    </div>
  </article>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute();

const type = ref<any>(route.query.type)

const onWxOpen = () => {
  window.open('https://mp.weixin.qq.com/');
}

</script>
<style lang="scss" scoped>
.perfect-info-main {
  padding: 20px;
  margin: 20px;
  background-color: #ffffff;
  .content {
    margin-bottom: 40px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      color: #33302d;
      font-size: 16px;
      font-weight: 700;
      line-height: 18px;
    }
    .text {
      margin: 14px 0;
      font-size: 14px;
      color: #606266;
    }
    .bg-img {
      width: 100%;
    }
  }
  .footer_buttons {
    text-align: right;
  }
}
</style>